{% extends "base.html" %}

{% block content %}
    <h1> 配置变量 </h1>
    <form action="/configtag.html" method="post">
        <table class="table">
            <thead class="thead-dark">
            <tr>
                <th scope="col">#</th>
                <th scope="col">Area</th>
                <th scope="col">DBnum</th>
                <th scope="col">Start</th>
                <th scope="col">Type</th>
                <th scope="col">Index</th>
                <th scope="col">Value</th>
            </tr>
            </thead>
            <tbody>
            {% for item in [1,2,3,4,5,6,7,8,9,10] %}
            <tr>
                <th scope="row">{{ item }}</th>
                <td>
                    <select id="Tag{{ item }}Area" name="Tag{{ item }}Area" class="form-control">
                        <option selected>DB</option>
                        <option>M</option>
                        <option>I</option>
                        <option>Q</option>
                        <option>C</option>
                        <option>T</option>
                    </select>
                </td>
                <td>
                    <div class="form-group">
                        <input type="text" class="form-control" id="Tag{{ item }}DBnum" name="Tag{{ item }}DBnum" placeholder="DB number">
                    </div>
                </td>
                <td>
                    <div class="form-group">
                        <input type="text" class="form-control" id="Tag{{ item }}Start" name="Tag{{ item }}Start" placeholder="tag address">
                    </div>
                </td>
                <td>
                    <select id="Tag{{ item }}Type" name="Tag{{ item }}Type" class="form-control">
                        <option selected>BOOL</option>
                        <option>Byte</option>
                        <option>Int</option>
                        <option>Word</option>
                        <option>Dint</option>
                        <option>Dword</option>
                        <option>Real</option>
                    </select>
                </td>
                <td>
                    <div class="form-group">
                        <input type="text" class="form-control" id="Tag{{ item }}Index" name="Tag{{ item }}Index" placeholder="Tag bit index">
                    </div>
                </td>
                <td>
                    <div class="form-group">
                        <input type="text" class="form-control" id="Tag{{ item }}Value" name="Tag{{ item }}Value" placeholder="process value" readonly>
                    </div>
                </td>
            </tr>
            {% endfor %}
            </tbody>
        </table>
        <button type="submit" class="btn btn-primary">Save</button>
    </form>

{% endblock %}


{% block script %}
    <script>
        $(document).ready(function () {
            namespace = '/conn';
            var socket = io.connect(location.protocol + '//' + document.domain + ':' + location.port + namespace, {transports: ['websocket']});
            socket.on('server_response', function (res) {
                console.log(res.data);
            });

        });

    </script>
{% endblock %}